<clr-modal [(clrModalOpen)]="showInfoModal" [clrModalSize]="'lg'" [clrModalClosable]=false>
  <h3 class="modal-title">可用区详情</h3>
  <div class="modal-body" *ngIf="currentZone">
    <hr/>
    <div class="card-block">
      <ul class="list-unstyled" *ngIf="currentZone.provider === 'vsphere'">
        <li><b style="margin-right: 16px">名称:</b>{{currentZone.name}}</li>
        <li><b style="margin-right: 16px">区域:</b>{{currentZone.region}}</li>
        <li><b style="margin-right: 16px">资源池:</b>{{currentZone.cloud_zone}}</li>
        <li><b style="margin-right: 16px">集群:</b>{{currentZone.vars['vc_cluster']}}</li>
        <li><b style="margin-right: 16px">存储资源:</b>{{currentZone.vars['vc_storage']}}</li>
        <li><b style="margin-right: 16px">网络资源:</b>{{currentZone.vars['vc_network']}}</li>
        <li><b style="margin-right: 16px">起始 Ip:</b>{{currentZone.vars['ip_start']}}</li>
        <li><b style="margin-right: 16px">终止 Ip:</b>{{currentZone.vars['ip_end']}}</li>
        <li><b style="margin-right: 16px">网关:</b>{{currentZone.vars['vc_gateway']}}</li>
        <li><b style="margin-right: 16px">DNS1:</b>{{currentZone.vars['dns1']}}</li>
        <li><b style="margin-right: 16px">DNS2:</b>{{currentZone.vars['dns2']}}</li>
        <li *ngIf="currentZone.vars['template_type'] === 'customize'"><b style="margin-right: 16px">模板:</b>{{currentZone.vars['image_name']}}</li>
        <li><b style="margin-right: 16px">创建时间:</b>{{currentZone.date_created | date: 'yyyy-MM-dd HH:mm:ss'}}</li>
      </ul>
    </div>
    <div class="card-block" *ngIf="currentZone.provider === 'openstack'">
      <ul class="list-unstyled">
        <li><b style="margin-right: 16px">名称:</b>{{currentZone.name}}</li>
        <li><b style="margin-right: 16px">区域:</b>{{currentZone.region}}</li>
        <li><b style="margin-right: 16px">可用区:</b>{{currentZone.vars['openstack_zone']}}</li>
        <li><b style="margin-right: 16px">存储类型:</b>{{currentZone.vars['openstack_storage_type']}}</li>
        <li><b style="margin-right: 16px">网络:</b>{{currentZone.vars['openstack_network']}}</li>
        <li><b style="margin-right: 16px">安全组:</b>{{currentZone.vars['openstack_security_group']}}</li>
        <li><b style="margin-right: 16px">创建时间:</b>{{currentZone.date_created | date: 'yyyy-MM-dd HH:mm:ss'}}</li>
      </ul>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="cancel()">取消</button>
  </div>
</clr-modal>
